<template>
  <div>
    <el-container>
      <el-header>
        <el-menu
            style="padding:5mm"
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
          <el-row>
            <el-col :span="4"><h1 align="center">影院订票系统</h1></el-col>
            <el-col :span="2"><el-menu-item index="1" @click="$router.push('/')"  align="center">首页</el-menu-item></el-col>
            <el-col :span="2"><el-menu-item v-if="islogined" index="2" @click="$router.push('/center')" align="center">个人中心</el-menu-item></el-col>
            <el-col :span="12"><b>&nbsp</b></el-col>
            <el-col :span="2">
              <el-menu-item v-if="islogined" index="3" @click="$router.push('/center')" align="center">{{ nickname }}</el-menu-item>
              <el-menu-item v-else index="3" @click="logout();$router.push('/login')" align="center">登录</el-menu-item>
            </el-col>
            <el-col :span="2">
              <el-menu-item v-if="islogined" index="4" @click="logout();$router.push('/login')"  align="center">登出</el-menu-item>
              <el-menu-item v-else index="4" @click="$router.push('/register')"  align="center">注册</el-menu-item>
            </el-col>
          </el-row>
        </el-menu>
      </el-header>
      <el-divider></el-divider>
      <el-main>
        <template>
        <el-carousel :interval="4000" type="card" height="600px">
          <el-carousel-item v-for="item in imgPre" v-bind:key="item.url">
            <el-image
                style="width: 100%; height:100%"
                :src="item.url"
                :fit="fits"></el-image>
          </el-carousel-item>
        </el-carousel>
        </template>
      </el-main>
    </el-container>

    <el-container>
      <el-header style="margin-left: 100px">
        <el-input style="width: 500px;" placeholder="请输入影片名称" suffix-icon="el-icon-search" v-model="movieName"></el-input>
        <el-button class="ml-5" type="primary" @click="load">搜索</el-button>
        <el-button class="ml-5" type="primary" @click="" >购买会员卡</el-button>
      </el-header>
      <el-main>
        <el-table :data="tableData" border stripe :header-cell-class-name="headerBg">
          <el-table-column prop="movieId" label="电影序号" v-if="false" width=150px align="center">
          </el-table-column>
          <el-table-column prop="movieDescription" label="影片简介" v-if="false" width=150px align="center">
          </el-table-column>
          <el-table-column prop="length" label="放映时长" v-if="false" width=150px align="center">
          </el-table-column>
          <el-table-column prop="actors" label="主演" width=150px v-if="false" align="center">
          </el-table-column>
          <el-table-column prop="language" label="语言" v-if="false" width=150px align="center">
          </el-table-column>
          <el-table-column prop="cost" label="标准票价" v-if="false" width=150px align="center">
          </el-table-column>
          <el-table-column prop="movieName" label="电影名称" width=150px align="center">
          </el-table-column>
          <el-table-column prop="pic" label="图片" width="200" align="center">
            <template>
              <el-image style="width: 50%; height: 50%"
                        :src="require('../assets/xsb.jpg')">
              </el-image>
            </template>
          </el-table-column>
          <el-table-column prop="movieDescription" label="电影简介" header-align="center">
          </el-table-column>
          <el-table-column width="200" align="center">
            <!--<template slot-scope="scope">
              <el-button type="success" @click="collect(scope.row);$router.push('/details')"> 查看详情 </el-button>
            </template>-->
            <template slot-scope="scope">
              <el-button type="success" @click="collect(scope.row);$router.push('/details')"> 查看详情 </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
    <div  style="padding:10px 0">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-size="pageSize"
          :page-sizes="[2, 5, 10, 20]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          style="align-self: center">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
export default {
  name:"HomeView",
  data() {
    /*const item = {
      id: 1,
      movieName: '新神榜：杨戬',
      pic: require('../assets/xsb.jpg'),
      movieDescription: '商周之战一千五百年后，天界衰落，蒙冤落魄的杨戬以赏银捕手为业谋生。一日，杨戬接受了一位神秘访客的赏银去追捕一位少年，意外发现少年竟是自己的亲外甥沉香。沉香立志要寻回宝莲灯，劈山救母，却将酿成大祸。杨戬踏上追寻沉香并揭开尘封往事的旅程……'
    };*/
    return {
      //baseUrl: '../assets/',
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
      islogined:false,
      //tableData: Array(20).fill(item),
      tableData: [],
      total: 0,
      movieName: "",
      movieId: 0,
      pic: "",
      url: "this.pic",
      pageNum: 1,
      pageSize: 2,
      imgPre: [
        {url: require('../assets/xsb.jpg')},
       // {url: require('../assets/xsb.jpg')},
       // {url: require('../assets/xsb.jpg')}
      ],
      activeIndex: '1',
      fits: 'scale-down',
      collapseBtnClass: 'el-icon-setting',
      scope: '../assets/xsb.jpg',
      isCollapse: false,
      sideWidth: 200,
      logoTextShow: true,
      headerBg: 'headerBg',
      nickname: ''
    }
  },

  created(){
    this.getUser();
    this.load();
    localStorage.removeItem('movi')
  },
  methods: {
    logout(){
      localStorage.clear();
    },
    /*collect(scope){
      request.post("http://localhost:8088/api/analyse/mov",{
        movieName:scope.movieName,
      }).then(res =>(
          localStorage.setItem("movi",JSON.stringify(res.data))
      ))
    },*/
    collect(rowdata){
        localStorage.setItem("movieName",rowdata.movieName)
        localStorage.setItem("length",rowdata.length)
        localStorage.setItem("cost",rowdata.cost)
        localStorage.setItem("actors",rowdata.actors)
        localStorage.setItem("director",rowdata.director)
        localStorage.setItem("language",rowdata.language)
    },
    load() {
      request.get("http://localhost:8088/api/home/page", {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          movieName: this.movieName,
          movieId: this.movieId
        }
      }).then(res => {
        console.log(res)
        this.tableData = res.data
        this.total = res.total
      })
    },
    getUser(){
    let nickname = this.user.nickname;
    let islogin =localStorage.getItem('islogin');
    if(islogin == '1')
    {
      this.islogined = true;
      this.nickname= nickname;
    }
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    handleSizeChange (pageSize){
      console.log(pageSize)
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange (pageNum){
      console.log(pageNum)
      this.pageNum = pageNum
      this.load()
    },

  }
};
</script>
<style>
.carousel-item {
  width: 100%;
  height: 100%;
  background: white;
  display: flex;
  justify-content: center;
}
.carousel-img {
  max-width: 100%;
  max-height: 100%;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>
